<template>
	<view class="content">
		<view class="title">真实姓名</view>
		<input placeholder="请输入真实姓名" class="inputs" placeholder-class="placeholder" v-model="realName" maxlength="5" type="text" />
		<view class="title">银行卡号</view>
		<input placeholder="请输入银行卡号" class="inputs" placeholder-class="placeholder" v-model="bankCardNumber" maxlength="25" type="number" />
		<view class="title">开户银行</view>
		<input placeholder="请输入开户银行" class="inputs" placeholder-class="placeholder" v-model="openingBank" maxlength="8" type="text" />
		<view class="sure" @tap="add">保存</view>
		<!-- 确认弹窗 -->
		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">确认</view>
				<!-- <view class="numTitle">兑换金额</view>
				<input placeholder="请输入兑换金额" class="input" placeholder-class="placeholder" maxlength="11" type="number" v-model="amount" />
				<view class="numTitle">交易密码</view>
				<input placeholder="请输入交易密码" class="input" placeholder-class="placeholder" password maxlength="11" type="number" v-model="payPassword" /> -->
			  <view class="numTitle">手机号验证码</view>
			  <input placeholder="请输入您的手机号验证码" class="input" placeholder-class="placeholder" password maxlength="8" type="number" v-model="verifyCode"/>
			  <view class="codes" @tap="getCodes">{{text}}</view>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { editPayment,paymentDetail,getCode } from '../../api/api.js'
	export default {
		data() {
			return {
				phone:'',
				// 是否展示购买弹窗
				isProp:false,
				text:'获取验证码',
				// 验证码
				verifyCode:'',
				// 真实姓名
				realName:'',
				// 银行卡号
				bankCardNumber:'',
				// 开户行
				openingBank:'',
				// 收款方式id
				id:'',
			}
		},
		onLoad(e) {
			this.id = e.id
			if(this.id) {
				// 获取收款方式详情
				this.getDetail()
			}
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
		},
		methods: {
			// 获取收款方式详情
			getDetail() {
				let data = {
					id:this.id
				}
				paymentDetail(data).then( res=> {
					this.realName = res.data.realName
					this.bankCardNumber = res.data.bankCardNumber
					this.openingBank = res.data.openingBank
				})
			},
			//获取验证码
			getCodes(){
				console.log(this.phone)
				if( this.text != '获取验证码' ) {
					return false
				}
				//判断手机号是否正确
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					let data = {
						phone:this.phone,
						type:9
					}
					getCode(data).then(res=> {
						if ( res.code == 200 ) {
							uni.showToast({
								icon:'none',
								title:'验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(()=>{
							  if(seconds > 0){
								  seconds -- ;
								  this.text = seconds + 's后重新获取'
							  }else{
								  this.text = '获取验证码';
								  clearInterval(interval)
							  }
							},1000)
						}
					})
			  }else{
				  uni.showToast({
					  icon:'none',
					  title:'请输入正确的手机号~'
				  })
			  }
			},
			add() {
				if( !this.realName ) {
					uni.showToast({
					  icon:'none',
					  title:'请输入真实姓名'
					})
					return false
				}
				if( !this.bankCardNumber ) {
					uni.showToast({
					  icon:'none',
					  title:'请输入银行卡号'
					})
					return false
				}
				if( !this.openingBank ) {
					uni.showToast({
					  icon:'none',
					  title:'请输入开户银行'
					})
					return false
				}
				this.isProp = true
			},
			// 关闭弹窗
			closeProp() {
				this.isProp = false
			},
			sure() {
				let data = {
					id:this.id,
					realName:this.realName,
					bankCardNumber:this.bankCardNumber,
					openingBank:this.openingBank,
					paymentTermType:1,
					msgCode:this.verifyCode
				}
				editPayment(data).then( res=> {
					uni.showToast({
						icon:'none',
						title:'添加成功~'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta:2
						})
					},1000)
				})
			},
			
		}
	}
</script>

<style lang="less">
  .content {
		padding-top: 40rpx;
		.title {
			margin: 0rpx 0 0 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 40rpx;
		}
		.placeholder {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
		.inputs {
			width: 690rpx;
			margin: 10rpx 0 40rpx 30rpx;
			height: 90rpx;
			border-bottom: 2rpx solid #F2F2F2;
		}
		.sure {
			margin-left: 30rpx;
			position: fixed;
			bottom:191rpx ;
			text-align: center;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #FE3B33;
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.prop {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.input {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
